<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>火云鞋神购物鞋店--订单管理</title>
</head>
<link rel="shortcut icon" href="favicon_2.ico"/>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/admin.css">
<link rel="stylesheet" href="css/layui.css" media="all">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css"/>
<script src="jquery-3.3.1.min.js"></script>

<style>
    #image {
        /*display: block;*/
        display: inline-block;

        /* This rule is very important, please don't ignore this */
        max-width: 100%;

    }
    #div {
        max-width: 300px;
        max-height: 300px;
    }

    #canvas{
        width: 300px;
        position: absolute;
        top: 532px;
        left: 660px;
    }
    .img{
        margin-left: 40px;
    }
</style>
<body>
<!--更改-->
<div class="left_nav">
    <div class="left_aftsale"></div>
    <div class="right">
        <div class="search_txt font_family">查找</div>
        <input type="text">
        <div class="work">
            <ul>
                <li>
                    <div class="txtf">项目</div>
                    <div class="imgf"></div>
                    <div class="png1"></div>
                </li>
                <li>
                    <div class="txt">物流管理</div>
                    <div class="png2"></div>
                </li>
                <li>
                    <div class="txt">优惠券管理</div>
                    <div class="png3"></div>
                </li>
                <li>
                    <div class="txt">用户关联优惠券</div>
                    <div class="png4"></div>
                </li>
                <li>
                    <div class="txt">售后管理</div>
                </li>
                <li>
                    <div class="txt">订单管理</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--更改-->
<div class="header">
    <div class="ht">
        <div class="title_name">商品管理</div>
        <!--<div class="work">
            <ul>
                <li>全部信息</li>
                <li>已发货</li>
                <li>未发货</li>
            </ul>
        </div>-->
    </div>
    <!--<div class="header_content">-->
    <!--<ul>-->
    <!--<li>售后编号</li>-->
    <!--<li>|</li>-->
    <!--<li>订单编号</li>-->
    <!--<li>|</li>-->
    <!--<li>订单状态</li>-->
    <!--<li>|</li>-->
    <!--<li>用户id</li>-->
    <!--<li>|</li>-->
    <!--<li>用户昵称</li>-->
    <!--<li>|</li>-->
    <!--<li>售后请求</li>-->
    <!--<li>|</li>-->
    <!--<li>处理状况</li>-->
    <!--<li>|</li>-->
    <!--<li>商品名称</li>-->
    <!--</ul>-->
    <!--</div>-->
</div>
<div class="content">
    <!--<table class="layui-hide" id="test" lay-filter="test"></table>-->

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
            </div>
        </div>
       <!-- <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">耐克</option>
                    <option value="1">李宁</option>
                    <option value="2">阿迪达斯</option>
                    <option value="3">匡威</option>
                    <option value="4">AJ</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">鞋帮</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">高帮</option>
                    <option value="1">低帮</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">材质</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">合成革</option>
                    <option value="1">修面皮</option>
                    <option value="2">棉布</option>
                    <option value="3">人造皮革</option>
                    <option value="4">太空革</option>
                    <option value="5">橡胶</option>
                    <option value="6">绒面</option>
                    <option value="7">布</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">科技</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">合成革</option>
                    <option value="1">修面皮</option>
                    <option value="2">棉布</option>
                    <option value="3">人造皮革</option>
                    <option value="4">太空革</option>
                    <option value="5">橡胶</option>
                    <option value="6">头层牛皮（除牛反绒）</option>
                    <option value="7">布</option>
                    <option value="8">胶粘鞋</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">店铺名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入店铺名称" value="火云鞋神旗舰店" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">适用人群</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男鞋" title="男鞋">
                <input type="radio" name="sex" value="女鞋" title="女鞋">
            </div>
        </div>


        <div class="img">
            <input type="file" id="file"/>
            <button id="btn">裁剪</button>
            <button id="close">取消</button>
            <div id="div">

                <img id="image" src="" alt=""/>
                <img id="canvas" src="" alt=""/>

            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

   <!-- <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>-->

    <script src="jquery-3.3.1.min.js"></script>
    <script src="layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
    <!-- <script>
         layui.use('table', function () {
             var table = layui.table;

             table.render({
                 elem: '#test'
                 , url: 'http://localhost:8081/project/all.do'
                 , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                 , title: '用户数据表'
                 , cols: [[
                     {type: 'checkbox', fixed: 'left'}
                     , {field: 'orderId', title: '订单Id', width: 100,}
                     , {field: 'orderNo', title: '订单编号', width: 100}
                     , {field: 'orderDate', title: '订单日期', width: 90}
                     , {field: 'orderUserId', title: '用户Id', width: 100}
                     , {field: 'orderGoodId', title: '商品Id', width: 90}
                     , {field: 'orderMoney', title: '订单价格', width: 100}
                     , {field: 'orderState', title: '订单状态', width: 110}
                     , {field: 'reserve2', title: '数量', width: 80, sort: true}
                     , {field: 'reserve3', title: '总价', width: 80, sort: true}
                     /*, {field: 'goodName', title: '商品名称', width: 100}*/
                     , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                 ]]
                 , page: true
             });

             //头工具栏事件
             table.on('toolbar(test)', function (obj) {
                 var checkStatus = table.checkStatus(obj.config.id);
                 switch (obj.event) {
                     case 'getCheckLength':
                         var data = checkStatus.data;
                         layer.msg('选中了：' + data.length + ' 个');
                         break;
                     case 'isAll':
                         layer.msg(checkStatus.isAll ? '全选' : '未全选');
                         break;
                 }
                 ;
             });

             //监听行工具事件
             table.on('tool(test)', function (obj) {
                 var data = obj.data;
                 //console.log(obj)
                 if (obj.event === 'del') {
                     layer.confirm('真的删除行么', function (index) {
                         obj.del();
                         dlevalue(obj.data.orderId)
                         layer.close(index);
                     });
                 } else if (obj.event === 'edit') {
                     let orderstate = inputvalue(obj.data.orderState)
                     localStorage.setItem("orderState",orderstate)
                     layer.prompt({
                         formType: 2
                         , value: data.email
                     }, function (value, index) {
                         obj.update({
                             email: value
                         });
                         layer.close(index);
                     });
                 }
             });
         });
     </script>-->
</div>


<script>

    var cropper
    //onchange 事件会在域的内容改变时发生
    document.getElementById("file").onchange = function (e) {
        document.getElementById("canvas").style.opacity = 1
        if (cropper) {
            //销毁裁剪器
            cropper.destroy()
        }
        //获取事件触发元素的文件
        //target 属性规定哪个DOM元素触发了该事件
        var file = e.target.files[0]

        //FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
        var reader = new FileReader()
        //将文件读取为 DataURL
        reader.readAsDataURL(file)

        //文件读取完成时触发
        reader.onload = function (et) {
            /**
             * 文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。
             * 如果读取失败，则 result 的值为 null ，否则即是读取的结果，
             * 绝大多数的程序都会在成功读取文件的时候，抓取这个值。
             * @type {string | ArrayBuffer}
             */
                //获取实例的result属性
            const clip = document.getElementById('image');
            clip.src = et.target.result
            //cropper = new Cropper(被裁剪对象,配置对象);
            cropper = new Cropper(clip, {
                // aspectRatio: 16 / 9,// 定义裁剪图比例
                //3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充
                viewMode: 3,
                //默认不显示裁剪框
                //autoCrop:false,
                crop(event) {
                    // console.log(event.detail.width)
                    document.getElementById("canvas").style.width = event.detail.width/4 + "px"
                    document.getElementById("canvas").style.height = event.detail.height/4 + "px"
                    /**
                     * 拿到裁剪后的base64的图片,储存在浏览器缓存中
                     * base64文件编码的方式
                     * 将url转换成dataurl
                     * @type {string}
                     */
                    //cropper.getCroppedCanvas() 获得裁剪后的canvas元素
                    document.getElementById("canvas").src = cropper.getCroppedCanvas().toDataURL('image/jpeg')
                },
            });
        }
    }
    document.getElementById("btn").onclick = function () {
        var blob = dataURItoBlob(document.getElementById("canvas").src)
        var myFile = new File(
            [blob],
            document.getElementById("file").files[0].name,
            {type: document.getElementById("file").files[0].type});

        var formData = new FormData
        formData.set("file", myFile)
        $.ajax({
            url:"/clip/image",
            type:"post",
            data:formData,
            dataType:"json",
            processData: false,
            contentType: false,
            success:function (data) {

                if(data.code == 1){
                    alert("上传成功!")
                }else{
                    console.log("呜呜呜")
                }
            }
        })
    }
    document.getElementById("close").onclick = function ()  {
        document.getElementById("file").value = ""
        if (cropper) {
            cropper.destroy()
        }
        document.getElementById("image").src = ""
        document.getElementById("canvas").src = ""
        document.getElementById("canvas").style.opacity = 0

    }

    //将dataurl 转换为 blob
    function dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else {
            byteString = unescape(base64Data.split(',')[1]);
        }
        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        var blob = new Blob([ia], {
            type: mimeString
        });
        return blob;
    }

</script>

</body>
</html>